<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>  
  <div></div>

  <script>
   
    // 创建一个观察者
    function observer(target) {
      const div = document.querySelector('div')
        const proxy = new Proxy(target,{
          set(target,prop,value){
            Reflect.set(target,prop,value)
            render()
          },
           get (target,prop){
              return Reflect.get(target,prop)
           }
          
        })
        render()
        function render(){
                    let html = ''
                    for(const b of Object.keys(proxy)){
                      html += `
                      <p><span>${b}:${proxy[b]}</span></p>
                      `
                    }
                    console.log(html)
                    console.log(div)
                    div.innerHTML = html
        }
        return proxy
    }
    
    const obj = observer({
      a:1,
      b:2
    })
    console.log(obj)
    setTimeout(() => {
      obj.a = 1111
      console.log(obj.a)
      obj.c = 3
      console.log(obj)
    }, 1000);
  </script>
</body>
</html>